/* 全局样式 */
:root {
  // 菜单文字颜色
  // --el-menu-text-color: #ffffff !important;
  // 菜单hover背景颜色
  --el-menu-hover-bg-color: #426fa1 !important;
  // 菜单收缩时 鼠标悬浮显示菜单的背景颜色
  --el-bg-color-overlay: white !important;

  --el-menu-bg-color: rgb(81, 81, 81) !important;
  // 面包屑文字的主要颜色
  --el-text-color-primary: rgb(74, 72, 72) !important;
}

//menu白边
.el-popper.is-light {
  border: none !important;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  // transition: all 1s;
}

// 亮色主题 主题颜色 只有在该类名下才能使用这些变量
.theme-light {
  $theme-aside-bg: #545c64;
  $theme-header-bg: #ffffff;
  $theme-navbar-bg: #e9e9e9;
  $theme-main-bg: #ffffff;
  $theme-footer-bg: #545c64;
  display: grid;
  grid-template-columns: auto 5fr 5fr;
  grid-template-rows: auto auto 10fr auto;
  grid-template-areas:
    "aside header header"
    "aside navbar navbar"
    "aside main main"
    "footer footer footer";
  .el-tag--dark {
  }
  // 不需要使用引号
  .left-aside {
    grid-area: aside;
    transition: width 0.4s;
    background-color: $theme-aside-bg;
  }
  .el-picker-panel {
    background-color: red;
  }
  .header {
    grid-area: header;
    background-color: $theme-header-bg;
  }
  .main {
    grid-area: main;
    background-color: $theme-main-bg;
  }
  .footer {
    grid-area: footer;
    background-color: $theme-footer-bg;
  }
  .navbar {
    grid-area: navbar;
    background-color: $theme-navbar-bg;
  }
}
// 暗色主题
.theme-dark {
  --el-menu-active-color: #1fca1f;
  $theme-aside-bg: #323232;
  $theme-header-bg: #323232;
  $theme-navbar-bg: #323232;
  $theme-main-bg: #323232;
  $theme-footer-bg: #323232;
  color: #ffffff;
  display: grid;
  grid-template-columns: auto 5fr 5fr;
  grid-template-rows: auto auto 10fr auto;
  grid-template-areas:
    "aside header header"
    "aside navbar navbar"
    "aside main main"
    "footer footer footer";
  .el-tag--dark {
    --el-tag-bg-color: #000000;
  }
  // 不需要使用引号
  .left-aside {
    grid-area: aside;
    background-color: $theme-aside-bg;
  }
  .el-table {
    --el-table-bg-color: gray;
    --el-table-text-color: #fff;
    --el-bg-color: #323232;
    --el-table-row-hover-bg-color: #646464;
  }
  .header {
    grid-area: header;
    background-color: $theme-header-bg;
  }
  .main {
    grid-area: main;
    background-color: $theme-main-bg;
  }
  .footer {
    grid-area: footer;
    background-color: $theme-footer-bg;
  }
  .navbar {
    grid-area: navbar;
    background-color: $theme-navbar-bg;
  }
}
